//自定义类名
.publicBorder() {
    border-image: url(../images/border.png) 53 40 20 128;
    border-image-width: 2.2083rem 1.6667rem .8333rem 5.3333rem;
}

.line() {
    width: .125rem;
    height: .9167rem;
    background-color: #00f2f1;
}


@keyframes move {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-15rem);
    }
}


body {
    background: url(../images/bg.jpg) no-repeat;
    background-size: cover;

    //整体大盒子
    .view {
        width: 100%;
        background: url(../images/logo6.png) no-repeat;
        background-size: contain;
        display: flex;
        padding: 4.4167rem .8333rem .8333rem .8333rem;
        box-sizing: border-box;
        user-select: none;
        cursor: pointer;

        //左侧盒子
        .leftContainer {
            flex: 3;


            //顶部部分
            .left_top {
                width: 100%;
                height: 4.5833rem;
                .publicBorder();
                display: flex;
                align-items: center;
                justify-content: space-around;

                .left_top_item {
                    h3 {
                        font-size: 1.0833rem;
                    }

                    p {
                        font-size: .6667rem;
                        color: #006bff;
                        margin-top: .8333rem;
                    }
                }
            }


            //中间部分
            .left_middle {
                width: 100%;
                height: 19.8333rem;
                .publicBorder();
                margin: .8333rem 0;

                //标题
                .top_title {
                    width: 100%;
                    height: 2.5rem;
                    display: flex;
                    align-items: center;
                    padding-left: 1.25rem;
                    box-sizing: border-box;

                    a {
                        font-size: .9167rem;
                    }

                    a.active {
                        color: #006bff;
                    }

                    .line_box {
                        .line();
                        margin: 0 1.0833rem;
                    }
                }

                //副标题
                .table_title {
                    width: 100%;
                    height: 1.6667rem;
                    line-height: 1.6667rem;
                    background-color: rgba(255, 255, 255, .1);
                    padding: 0 1.25rem;
                    box-sizing: border-box;

                    span {
                        color: #00f2f1;
                        font-size: .6667rem;

                        &:nth-child(2) {
                            margin-left: 3.4167rem;
                            margin-right: 7.9167rem;
                        }
                    }
                }

                //底部数据栏
                .bottom_table {
                    width: 100%;

                    .public {
                        width: 100%;
                        height: 15rem;
                        overflow: hidden;

                        ul {
                            animation: move 10s linear infinite;

                            &:hover {
                                animation-play-state: paused;
                            }
                        }

                        li {
                            height: 1.5rem;
                            line-height: 1.5rem;
                            padding: 0 1.25rem;
                            box-sizing: border-box;

                            &:hover {
                                background-color: rgba(255, 255, 255, .1);
                            }

                            span {
                                color: #006bff;
                                font-size: .5833rem;
                                display: inline-block;

                                &:nth-child(1) {
                                    width: 5.8333rem;
                                }

                                &:nth-child(2) {
                                    width: 11.25rem;
                                }
                            }
                        }
                    }
                }
            }

            //底部盒子
            .left_bottom {
                width: 100%;
                height: 14rem;
                .publicBorder();

                //标题
                .title {
                    width: 100%;
                    height: 2.8333rem;
                    padding-top: .8333rem;
                    box-sizing: border-box;

                    h3 {
                        font-size: 1.0833rem;
                        margin-left: 1.25rem;
                    }
                }

                //内容区域
                .content {
                    display: flex;
                    padding: 0 1.25rem;
                    box-sizing: border-box;

                    //饼状图
                    .pie_box {
                        flex: 1;
                        margin-right: .4167rem;
                    }

                    //数据盒子
                    .data_box {
                        width: 7rem;
                        height: 9.8333rem;
                        background: url(../images/rect.png) no-repeat;
                        background-repeat: round;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: space-around;

                        .item {
                            &:nth-child(1) span {
                                color: #ec4138;
                            }

                            &:nth-child(2) span {
                                color: #ffff00;
                            }

                            h3 {
                                font-size: 1rem;
                            }

                            p {
                                font-size: .8333rem;
                                margin-top: 1rem;
                                color: #006bff;
                            }
                        }
                    }
                }
            }
        }




        //中间
        .middleContainer {
            flex: 4;
            margin: 0 .8333rem;
            padding-top: 1.6667rem;
            box-sizing: border-box;

            //标题
            .middleContainer_top_title {
                width: 100%;
                display: flex;

                span {
                    font-size: .9167rem;
                    color: #006bff;
                }

                h3 {
                    font-size: .9167rem;
                    margin-left: .25rem;
                }
            }

            //地图
            .map {
                width: 100%;
                height: 21.6667rem;
                margin: .9167rem 0;
            }

            //底部
            .bottom_box {
                width: 100%;
                height: 14rem;
                padding: .8333rem 1.25rem;
                box-sizing: border-box;
                .publicBorder();

                .title {

                    h3 {
                        font-size: 1.0833rem;
                    }
                }

                .content {
                    width: 100%;
                    display: flex;
                    margin-top: .8333rem;

                    .data {
                        width: 7rem;
                        height: 9.8333rem;
                        background: url(../images/rect.png) no-repeat;
                        background-repeat: round;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: space-around;

                        .item {
                            &:nth-child(1) span {
                                color: #ec4138;
                            }

                            &:nth-child(2) span {
                                color: #ffff00;
                            }

                            h3 {
                                font-size: 1rem;
                            }

                            p {
                                font-size: .8333rem;
                                margin-top: 1rem;
                                color: #006bff;
                            }
                        }
                    }

                    .bar_box {
                        flex: 1;
                    }
                }
            }
        }




        //右侧
        .rightContainer {
            flex: 3;

            .rightContainer_top {
                height: 6.1667rem;
                width: 100%;
                .publicBorder();
                padding: .8333rem 1.25rem;
                box-sizing: border-box;

                .rightContainer_top_title {
                    display: flex;

                    a {
                        font-size: .75rem;
                        color: #006bff;
                    }

                    a.active {
                        color: #fff;
                    }

                    .line {
                        .line();
                        margin: 0 .75rem;
                    }
                }

                .top_content {
                    margin-top: 1.0833rem;

                    .content {
                        display: flex;

                        .item {
                            flex: 1;

                            &:nth-child(1) span {
                                color: #ec4138;
                            }

                            &:nth-child(2) span {
                                color: #ffff00;
                            }

                            h3 {
                                font-size: .8333rem;
                            }

                            p {
                                font-size: .75rem;
                                color: #006bff;
                                margin-top: .2083rem;
                            }
                        }


                    }
                }
            }


            .middle_linear {
                height: 10.25rem;
                width: 100%;
                .publicBorder();
                margin: .8333rem 0;
                padding: .8333rem 1.25rem;
                box-sizing: border-box;

                .title {
                    width: 100%;
                    display: flex;
                    margin-bottom: .4167rem;

                    h3 {
                        font-size: 1.0833rem;
                    }

                    .line {
                        width: .125rem;
                        height: 1.0833rem;
                        background-color: #00f2f1;
                        margin: 0 .5833rem;
                    }

                    p {
                        width: 1.0833rem;
                        height: 1.0833rem;
                        line-height: 1.0833rem;
                        text-align: center;
                        margin-left: 1.25rem;
                        color: #006bff;
                        border-radius: .2083rem;
                    }

                    p.active {
                        background-color: #4aa8ed;
                        color: #fff;
                    }
                }

                .linear {
                    width: 100%;
                    height: 7.4167rem;
                }
            }


            .middle_data {
                width: 100%;
                display: flex;
                height: 9.5833rem;
                margin-bottom: .8333rem;

                .left_data {
                    flex: 1;
                    .publicBorder();
                    margin-right: .8333rem;
                    padding: .8333rem 1.25rem;
                    box-sizing: border-box;

                    .title {
                        margin-bottom: 1.25rem;

                        h3 {
                            font-size: 1rem;
                        }
                    }

                    .content {
                        display: flex;
                        flex-wrap: wrap;
                        justify-content: space-between;

                        .item {
                            margin-right: .4167rem;
                            margin-bottom: .8333rem;

                            h3 {
                                font-size: 1.1667rem;
                                margin-bottom: .4167rem;
                            }

                            p {
                                color: #006bff;
                                font-size: .6667rem;
                            }
                        }
                    }

                }

                .right_data {
                    flex: 1;
                    .publicBorder();
                    padding: .8333rem 1.25rem;
                    box-sizing: border-box;
                    position: relative;

                    .title {
                        h3 {
                            font-size: .9167rem;
                        }
                    }

                    .half_circle {
                        width: 100%;
                        height: 3.3333rem;
                        margin-top: .8333rem;
                    }

                    .cricle_content {
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        cursor: pointer;
                        font-size: 1.0833rem;
                        margin-top: -0.75rem;
                        margin-left: -1.0833rem;
                    }

                    .botton_content {
                        width: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        margin-top: .2083rem;
                        padding: 0 .4167rem;
                        box-sizing: border-box;

                        .item {
                            h3 {
                                font-size: 1rem;
                                margin-bottom: .4167rem;
                            }

                            p {
                                color: #006bff;
                                font-size: .6667rem;
                            }
                        }
                    }
                }
            }

            .bottom_data {
                height: 11.6667rem;
                width: 100%;
                .publicBorder();
                padding: .8333rem 1.25rem;
                box-sizing: border-box;
                display: flex;

                .left_box {
                    width: 7.0833rem;

                    .title {
                        h3 {
                            font-size: 1.0833rem;
                        }
                    }

                    .content {
                        .item {
                            margin-top: 1.25rem;
                            display: flex;

                            &:nth-child(1) span:nth-child(1) {
                                color: #d83f35;
                            }

                            &:nth-child(2) span:nth-child(1) {
                                color: #74d9f2;
                            }

                            &:nth-child(3) span:nth-child(1) {
                                color: #47a4d8;
                            }

                            span:nth-child(1) {
                                font-size: 1.3333rem;
                            }

                            span:nth-child(2) {
                                display: block;
                                height: 1.25rem;
                                line-height: 1.25rem;
                                margin-left: .5833rem;
                                color: #06ade1;
                            }
                        }
                    }
                }

                .right_box {
                    flex: 1;

                    .title {
                        width: 100%;
                        display: flex;
                        justify-content: space-between;
                        margin-bottom: .6667rem;

                        h3 {
                            font-size: 1rem;
                        }

                        span {
                            font-size: .6667rem;
                            color: #006bff;
                            display: block;
                            height: 1rem;
                            line-height: 1rem;
                        }
                    }

                    .content {
                        display: flex;

                        .content_left {
                            width: 6.5833rem;

                            ul {
                                li {

                                    display: flex;

                                    span {
                                        font-size: .6667rem;
                                        color: #1595e5;
                                        display: block;
                                        height: 1.4167rem;
                                        line-height: 1.4167rem;

                                        &:nth-child(2) {
                                            width: 3.9167rem;
                                            text-align: center;
                                        }

                                        &:nth-child(1) {
                                            margin-left: .3333rem;
                                        }
                                    }

                                    span.icon-up {
                                        color: #d94141;
                                    }

                                    span.icon-down {
                                        color: #008b03;
                                    }

                                }

                                li.active {
                                    background-color: rgba(255, 255, 255, .1);
                                }
                            }
                        }

                        .content_right {
                            flex: 1;

                            ul {
                                background-color: rgba(255, 255, 255, .1);
                                li {
                                    display: flex;

                                    span {
                                        font-size: .6667rem;
                                        display: block;
                                        height: 1.4167rem;
                                        line-height: 1.4167rem;

                                        &:nth-child(2) {
                                            width: 3.75rem;
                                            text-align: center;
                                        }

                                        &:nth-child(1) {
                                            margin-left: .4167rem;
                                        }
                                    }

                                    span.icon-up {
                                        color: #d94141;
                                    }

                                    span.icon-down {
                                        color: #008b03;
                                    }

                                }
                            }
                        }
                    }
                }


            }
        }
    }
}